<template>
  <div class="successful-case-detail">
    <e-head></e-head>
    <div class="main-content">
      <router-info :current="routerInfo"></router-info>
      <div class="flex-container">
        <div class="flex-container-left">
          <div class="flex-left-title">
            {{ $t("lang.successfulCase") + ">" + $t("lang.detail") }}
          </div>
          <div class="flex-left-item-list">
            <div
              :class="[
                'flex-left-item',
                index == current ? 'flex-left-item_checked' : '',
              ]"
              v-for="(item, index) in successfulCase"
              :key="index"
              @click="detail(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="flex-container-right">
          <div
            class="ql-snow ql-editor"
            v-html="successfulCase[current].detail"
          ></div>
        </div>
      </div>
    </div>
    <e-foot></e-foot>
  </div>
</template>
<script>
import Ehead from "@/components/head.vue";
import Efoot from "@/components/foot.vue";
import RouterInfo from "@/components/router-info.vue";
export default {
  components: {
    "e-head": Ehead,
    "e-foot": Efoot,
    RouterInfo,
  },
  data() {
    return {
      successfulCase: [],
      current: null,
      routerInfo: [
        {
          name: "lang.home",
          route: "",
        },
        {
          name: "lang.successfulCase",
          route: "",
        },
        {
          name: "lang.detail",
          route: "",
        },
      ],
    };
  },
  created() {
    const s = JSON.parse(localStorage.getItem("successful-case"));
    this.current = s.current;
    this.successfulCase = Object.freeze(s.data);
  },
  methods: {
    detail(e) {
      localStorage.setItem(
        "successful-case",
        JSON.stringify({
          current: e,
          data: this.successfulCase,
        })
      );
      this.$router.push("/successful-case/detail/" + this.successfulCase[e].id);
      window.location.reload();
    },
  },
};
</script>
<style lang="scss" scoped>
.successful-case-detail {
}
</style>